import React, {Component} from 'react'
import {connect} from 'react-redux'
import EventTypes from '../util/EventTypes'
import {
    View,
    Text,
    StyleSheet,
} from 'react-native'
import {
    createBottomTabNavigator,
    createAppContainer
} from 'react-navigation'
import MyPage from '../page/MyPage'
import FavoritePage from '../page/FavoritePage'
import PopularPage from '../page/PopularPage'
import TrendingPage from '../page/TrendingPage'
import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
import Ionicons from 'react-native-vector-icons/Ionicons'
import Entypo from 'react-native-vector-icons/Entypo'
import {BottomTabBar} from 'react-navigation-tabs'
import EventBus from 'react-native-event-bus'

const TABS = {
    PopularPage: {
        screen: PopularPage,
        navigationOptions: {
            tabBarLabel: "最热",
            tabBarIcon: ({tintColor, focused}) => {
                return <MaterialIcons
                    name={'whatshot'}
                    size={26}
                    style={{color: tintColor}}
                />
            }
        }
    },
    TrendingPage: {
        screen: TrendingPage,
        navigationOptions: {
            tabBarLabel: "趋势",
            tabBarIcon: ({tintColor, focused}) => {
                return <Ionicons
                    name={'md-trending-up'}
                    size={26}
                    style={{color: tintColor}}
                />
            }
        }
    },
    FavoritePage: {
        screen: FavoritePage,
        navigationOptions: {
            tabBarLabel: "喜欢",
            tabBarIcon: ({tintColor, focused}) => (
                <MaterialIcons
                    name={'favorite'}
                    size={26}
                    style={{color: tintColor}}
                />
            )
        }
    },
    MyPage: {
        screen: MyPage,
        navigationOptions: {
            tabBarLabel: "我的",
            tabBarIcon: ({tintColor, focused}) => (
                <Entypo
                    name={'user'}
                    size={26}
                    style={{color: tintColor}}
                />
            )
        }
    },
}

class DynamicTabNavigator extends Component {
    _tabNavigator() {
        const {PopularPage, FavoritePage, MyPage, TrendingPage} = TABS
        PopularPage.navigationOptions.tabBarLabel = '最新'  // 动态修改导航的内容
        let tabs = {PopularPage, TrendingPage, FavoritePage, MyPage} //动态增减需要显示的导航目录
        return createAppContainer(createBottomTabNavigator(tabs, {
            tabBarComponent: props => {
                return (
                    <TabBarComponent theme={this.props.theme} {...props}/>
                )
            }
        }))
    }

    componentWillMount() {
        this.tabs = this._tabNavigator()
    }

    render() {
        const Tab = this.tabs
        return <Tab
            onNavigationStateChange={(prevState, nextState, action) => {
                EventBus.getInstance().fireEvent(EventTypes.BOTTOM_NAV_CHANGE, {
                    from: prevState.index,
                    to: nextState.index
                })
            }}
        />
    }
}

class TabBarComponent extends Component {

    render() {
        return <BottomTabBar
            {...this.props}
            activeTintColor={this.props.theme}
        />
    }
}

const styles = StyleSheet.create({
    welcome: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    }
})
const mapStateToProps = state => {
    return {
        theme: state.theme.theme
    }
}

export default connect(mapStateToProps)(DynamicTabNavigator)
